<template>
	<view class="register-box">
		<image src="../../static/images/recommendSong/taylor.jpg" class="bg"></image>
		<view class="input-box">
			<view class="input-item">
				<text>昵称</text>
				<input placeholder-class="place" v-model="nickname" type="text" placeholder="请输入你的昵称">
			</view>
			<view class="input-item">
				<text>手机号码</text>
				<input placeholder-class="place" v-model="tel" type="text" placeholder="请输入手机号">
			</view>
			<view class="input-item psw">
				<text>密码</text>
				<input placeholder-class="place" v-model="password" type="password" placeholder="请输入密码">
			</view>
			<Captcha :clickLoginBtn="clickLoginBtn" :tel="tel" @getCode="getCode"></Captcha>
			<view class="login" @click="handleRegister">注册</view>
		</view>
	</view>
</template>

<script>
	import { registerCellphone, checkCellphone, checkNickname, initNickname } from '../../api/index.js'
	import Captcha from '../../components/Captcha/Captcha.vue'
	export default {
		data() {
			return {
				tel: '',
				password: '',
				code: '',
				nickname: '',
				clickLoginBtn: false,
				codeDetail: {}
			}
		},
		components: { Captcha },
		methods: {
			getCode({ code, codeDetail, clickLoginBtn }) {
				this.code = code
				this.codeDetail = codeDetail
				this.clickLoginBtn = clickLoginBtn
			},
			async checkNickName() {
				if (!this.nickname) {
					uni.showToast({
						title: '昵称不能为空',
						mask: true,
						icon: 'none'
					})
					return false
				}
				const res = await checkNickname(this.nickname)
				if (res.data.duplicated) {
					uni.showToast({
						title: '该昵称已存在!',
						mask: true,
						icon: 'none'
					})
				}
				console.log(res)
				return !res.data.duplicated
			},
			// 进一步检测手机号是否被注册
			async checkCellphone(tel) {
				if (getApp().checkPhone(tel)) {
					let res = await checkCellphone(tel)
					// res.data.exist 为-1,表示从未注册
					if (res.data.exist === -1) return true
					uni.showToast({
						title: '该手机号已被注册!',
						icon: 'none',
						mask: true
					})
					return false
				}
			},
			// 注册
			async handleRegister() {
				this.clickLoginBtn = true
				// 延迟请求,等待数据加载
				setTimeout(async () => {
					if (await this.checkNickName()
					 && await this.checkCellphone(this.tel) 
					 && getApp().checkPsw(this.password) 
					 && getApp().checkCode(this.codeDetail)) {
						// 满足条件,开始注册
						const {data: res} = await registerCellphone({ captcha: this.code, phone: this.tel, password: this.password, nickname: this.nickname })
						if (res?.code === 200) {
							if (res?.token) {
								// 注册成功后初始化昵称
								await initNickname(this.nickname)
								uni.showToast({
									title: '注册成功!',
									icon: 'success',
									mask: true,
									duration: 2000
								})
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/login/phone'
									})
								}, 1500)
							} else {
								uni.showToast({
									title: '注册失败!',
									icon: 'success',
									mask: true,
									duration: 2000
								})
							}
						}
					} else {
						// 进行初始化操作
						this.codeDetail = {}
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.register-box {
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		position: relative;
		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		}
	}
</style>
